<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="工单列表" data-page-identification="c_ywr6oo0s9g">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_56q5auz3n0 自定义模板_9naw5vucd4 -->
            <!--          新建/编辑工单-->
            <a-modal
                centered
                v-model:visible="state.addOrEditVisible"
                :title="state.modalTitle"
                @ok="submit"
                @cancel="fatherCancel"
                width="1000px"
                destroy-on-close
                :ok-button-props="{ loading: state.fatherLoading }"
            >
                <div class="form-content">
                    <a-form :model="state.modalForm" ref="formRef">
                        <a-row>
                            <a-col :span="24">
                                <a-form-item
                                    label="工单标题"
                                    :rules="[{ required: true, message: '请输入工单标题', trigger: 'blur' }]"
                                    name="content"
                                >
                                    <a-textarea
                                        maxlength="100"
                                        show-count
                                        placeholder="请输入"
                                        v-model:value="state.modalForm.content"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item
                                    label="工单类型"
                                    :rules="[{ required: true, message: '请选择工单类型', trigger: 'blur' }]"
                                    name="type"
                                >
                                    <a-select
                                        :options="[
                                            {
                                                label: '产品问题',
                                                value: '产品问题'
                                            },
                                            {
                                                label: '数据问题',
                                                value: '数据问题'
                                            },
                                            {
                                                label: '算法问题',
                                                value: '算法问题'
                                            },
                                            {
                                                label: '系统故障',
                                                value: '系统故障'
                                            },
                                            {
                                                label: '产品需求',
                                                value: '产品需求'
                                            },
                                            {
                                                label: '算法需求',
                                                value: '算法需求'
                                            }
                                        ]"
                                        v-model:value="state.modalForm.type"
                                        placeholder="请选择"
                                        @change="hanldeTypeChange"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item
                                    label="优先级"
                                    :rules="[{ required: true, message: '请选择优先级', trigger: 'blur' }]"
                                    name="priority"
                                >
                                    <a-select
                                        :disabled="state.modalForm.type === '产品需求'"
                                        v-model:value="state.modalForm.priority"
                                        :options="[
                                            {
                                                label: 'p0',
                                                value: 'p0'
                                            },
                                            {
                                                label: 'p1',
                                                value: 'p1'
                                            },
                                            {
                                                label: 'p2',
                                                value: 'p2'
                                            },
                                            {
                                                label: 'p3',
                                                value: 'p3'
                                            }
                                        ]"
                                        placeholder="请选择"
                                        @change="getSolveTimeByType"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>

                        <a-row>
                            <a-col :span="12" v-if="state.modalForm.type !== '产品需求'">
                                <a-form-item
                                    label="计划解决时长(小时)"
                                    :rules="[
                                        {
                                            pattern: new RegExp(/^(0(\.5)?|[1-9](\d*)?(\.5)?(\.0)?)$/),
                                            message: '请输入大于0的数字(支持0.5的倍数)',
                                            trigger: 'blur'
                                        }
                                    ]"
                                    name="workHours"
                                >
                                    <a-input-number
                                        placeholder="请输入"
                                        v-model:value="state.modalForm.workHours"
                                        @change="getSolveTime"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item
                                    label="计划解决时间"
                                    :rules="[{ required: true, message: '请选择计划解决时间', trigger: 'blur' }]"
                                    name="endTime"
                                >
                                    <a-date-picker
                                        show-time
                                        placeholder="请选择"
                                        v-model:value="state.modalForm.endTime"
                                        value-format="YYYY-MM-DD HH:mm:ss"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <a-form-item
                                    label="问题来源"
                                    :rules="[{ required: true, message: '请选择问题来源', trigger: 'blur' }]"
                                    name="questionSource"
                                >
                                    <a-select
                                        v-model:value="state.modalForm.questionSource"
                                        :options="[
                                            {
                                                label: '400',
                                                value: '400'
                                            },
                                            {
                                                label: '现场反馈',
                                                value: '现场反馈'
                                            },
                                            {
                                                label: '系统自检',
                                                value: '系统自检'
                                            }
                                        ]"
                                        placeholder="请选择"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item
                                    label="所属区域"
                                    :rules="[{ required: true, message: '请选择所属区域', trigger: 'blur' }]"
                                    name="areaCode"
                                >
                                    <a-select
                                        allow-clear
                                        show-search
                                        :options="state.areaList"
                                        placeholder="请选择"
                                        v-model:value="state.modalForm.areaCode"
                                        @focus="getAreaList"
                                        :field-names="{ label: 'label', value: 'value' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                        @change="areaChange"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <a-form-item
                                    label="所属客户"
                                    :rules="[{ required: true, message: '请输入所属客户', trigger: 'blur' }]"
                                    name="customer"
                                >
                                    <a-select
                                        allow-clear
                                        show-search
                                        :options="state.customList"
                                        placeholder="请选择"
                                        v-model:value="state.modalForm.customer"
                                        @focus="getCustomerList"
                                        :field-names="{ label: 'name', value: 'name' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                        @change="customerChange"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item
                                    label="所属项目"
                                    :rules="[{ required: true, message: '请选择所属项目', trigger: 'blur' }]"
                                    name="projectId"
                                >
                                    <a-select
                                        allow-clear
                                        show-search
                                        :options="state.projectList"
                                        placeholder="请选择"
                                        v-model:value="state.modalForm.projectId"
                                        :field-names="{ label: 'projectName', value: 'projectId' }"
                                        :filter-option="
                                            (input, option) => {
                                                return (
                                                    option.projectName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                )
                                            }
                                        "
                                        @focus="getProjectList"
                                        @change="projectChange"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <a-form-item
                                    label="环境"
                                    :rules="[{ required: true, message: '请选择环境', trigger: 'blur' }]"
                                    name="environment"
                                >
                                    <a-select
                                        show-search
                                        allow-clear
                                        :options="state.environmentList"
                                        placeholder="请选择"
                                        v-model:value="state.modalForm.environment"
                                        :field-names="{ label: 'name', value: 'name' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                        @focus="getEnvironmentList"
                                        @change="environmentChange"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item
                                    label="所属产品"
                                    :rules="[{ required: true, message: '请选择所属产品', trigger: 'blur' }]"
                                    name="production"
                                >
                                    <a-select
                                        show-search
                                        allow-clear
                                        :options="state.productList"
                                        placeholder="请选择"
                                        v-model:value="state.modalForm.production"
                                        @change="productChange"
                                        @focus="getProductList"
                                        :field-names="{ label: 'name', value: 'name' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <a-form-item label="版本">
                                    <a-input v-model:value="state.modalForm.version" disabled />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <div class="description-tip" v-if="currentData.status !== '未开始' && currentData.status"
                            ><ExclamationCircleFilled class="tip-img" /> 解决中的工单不支持编辑问题描述</div
                        >
                        <a-row
                            :style="{
                                pointerEvents:
                                    currentData.status === '未开始' ||
                                    !currentData.status ||
                                    currentData.status === '待分发'
                                        ? 'auto'
                                        : 'none'
                            }"
                        >
                            <a-col :span="24">
                                <a-form-item
                                    label="问题描述"
                                    :rules="[{ required: true, message: '请输入问题描述', trigger: 'blur' }]"
                                    name="qillData"
                                >
                                    <QuillEditor
                                        v-model:content="state.modalForm.qillData"
                                        ref="quillEditor"
                                        :options="editorOption"
                                        class="quill-editor"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <!--                        <a-row>-->
                        <!--                            <a-col :span="24">-->
                        <!--                                <a-form-item-->
                        <!--                                    label="解决人"-->
                        <!--                                    :rules="[{ required: true, message: '请选择解决人', trigger: 'blur' }]"-->
                        <!--                                    name="solverList"-->
                        <!--                                >-->
                        <!--                                    <a-select-->
                        <!--                                        class="remove-icon"-->
                        <!--                                        show-search-->
                        <!--                                        mode="multiple"-->
                        <!--                                        :options="state.allUser"-->
                        <!--                                        v-model:value="state.modalForm.solverList"-->
                        <!--                                        placeholder="请选择"-->
                        <!--                                        :field-names="{ label: 'name', value: 'name' }"-->
                        <!--                                        :filter-option="-->
                        <!--                                            (input, option) => {-->
                        <!--                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0-->
                        <!--                                            }-->
                        <!--                                        "-->
                        <!--                                        @change="fatherSolverChange"-->
                        <!--                                    />-->
                        <!--                                </a-form-item>-->
                        <!--                            </a-col>-->
                        <!--                        </a-row>-->
                        <!--                        &lt;!&ndash;                      <a-col v-if="taskPeopleList.length > 0">&ndash;&gt;-->
                        <!--                        <a-col>-->
                        <!--                            <div style="width: 700px; margin-left: 135px; margin-bottom: 16px">-->
                        <!--                                <a-->
                        <!--                                    href="javascript:;"-->
                        <!--                                    v-for="(item, num) in taskPeopleList"-->
                        <!--                                    @click="handlerAddPeople(item.value, index)"-->
                        <!--                                    ><span style="margin: 0 5px">{{ item.value }}</span></a-->
                        <!--                                >-->
                        <!--                            </div>-->
                        <!--                        </a-col>-->
                        <a-col :span="24">
                            <a-form-item label="上传附件">
                                <a-upload
                                    v-model:file-list="state.modalForm.descriptionAttachmentList"
                                    :multiple="true"
                                    :before-upload="handlerFatherUpload"
                                    @remove="handlerFatherRemove"
                                    accept=".xlsx, image/*,.docx,, .xls,.mp4"
                                >
                                    <a-button type="primary">
                                        <upload-outlined />
                                        上传
                                    </a-button>
                                </a-upload>
                                <span>支持格式：.xlsx, image/*,.docx,, .xls,.mp4</span>
                            </a-form-item>
                        </a-col>
                    </a-form>
                </div>
            </a-modal>
            <!--          新建/编辑工单-->
            <!--          编辑子工单-->
            <a-modal
                centered
                v-model:visible="state.editSonVisible"
                title="编辑子工单"
                @ok="submitSon"
                width="1000px"
                :ok-button-props="{ loading: state.sonLoading }"
            >
                <div class="form-content">
                    <a-form :model="state.sonForm" ref="sonRef">
                        <a-row>
                            <a-col :span="24">
                                <a-form-item
                                    label="工单标题"
                                    :rules="[{ required: true, message: '请输入工单标题', trigger: 'blur' }]"
                                    name="content"
                                >
                                    <a-input
                                        maxlength="100"
                                        show-count
                                        placeholder="请输入"
                                        v-model:value="state.sonForm.content"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>

                        <a-row>
                            <a-col :span="24">
                                <a-form-item
                                    label="计划解决时间"
                                    :rules="[{ required: false, message: '请选择计划解决时间', trigger: 'blur' }]"
                                    name="endTime"
                                >
                                    <a-date-picker
                                        show-time
                                        placeholder="请选择"
                                        v-model:value="state.sonForm.endTime"
                                        value-format="YYYY-MM-DD HH:mm:ss"
                                    />
                                </a-form-item>
                            </a-col>
                            <!--                            <a-col :span="24">-->
                            <!--                                <a-form-item-->
                            <!--                                    label="解决人"-->
                            <!--                                    :rules="[{ required: true, message: '请选择解决人', trigger: 'blur' }]"-->
                            <!--                                    name="solverList"-->
                            <!--                                >-->
                            <!--                                    <a-select-->
                            <!--                                        class="remove-icon"-->
                            <!--                                        show-search-->
                            <!--                                        allow-clear-->
                            <!--                                        mode="multiple"-->
                            <!--                                        :options="state.allUser"-->
                            <!--                                        v-model:value="state.sonForm.solverList"-->
                            <!--                                        placeholder="请选择"-->
                            <!--                                        :field-names="{ label: 'name', value: 'name' }"-->
                            <!--                                        :filter-option="-->
                            <!--                                            (input, option) => {-->
                            <!--                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0-->
                            <!--                                            }-->
                            <!--                                        "-->
                            <!--                                        @change="sonSolverChange"-->
                            <!--                                    />-->
                            <!--                                </a-form-item>-->
                            <!--                            </a-col>-->
                        </a-row>
                        <!--                        <a-col>-->
                        <!--                            <div style="width: 700px; margin-left: 115px; margin-bottom: 16px">-->
                        <!--                                <a-->
                        <!--                                    href="javascript:;"-->
                        <!--                                    v-for="(item, num) in taskPeopleList"-->
                        <!--                                    @click="handlerAddSonPeople(item.value, index)"-->
                        <!--                                    ><span style="margin: 0 5px">{{ item.value }}</span></a-->
                        <!--                                >-->
                        <!--                            </div>-->
                        <!--                        </a-col>-->
                        <div class="description-tip" v-if="currentData.status !== '未开始' && currentData.status"
                            ><ExclamationCircleFilled class="tip-img" /> 解决中的工单不支持编辑问题描述</div
                        >
                        <a-row>
                            <a-col
                                :span="24"
                                :style="{
                                    pointerEvents:
                                        currentData.status === '未开始' ||
                                        !currentData.status ||
                                        currentData.status === '待分发'
                                            ? 'auto'
                                            : 'none'
                                }"
                            >
                                <a-form-item
                                    label="问题描述"
                                    :rules="[{ required: true, message: '请输入问题描述', trigger: 'blur' }]"
                                    name="quillData"
                                >
                                    <QuillEditor
                                        ref="sonQuillRef"
                                        v-model:content="state.sonForm.quillData"
                                        :options="editorOption"
                                        class="quill-editor"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-col :span="24">
                            <a-form-item label="上传附件">
                                <a-upload
                                    v-model:file-list="state.sonForm.descriptionAttachmentList"
                                    :multiple="true"
                                    :before-upload="handlerSonUpload"
                                    @remove="handlerSonRemove"
                                    accept=".xlsx, image/*,.docx,, .xls,.mp4"
                                >
                                    <a-button type="primary">
                                        <upload-outlined />
                                        上传
                                    </a-button>
                                </a-upload>
                                <span>支持格式：.xlsx, image/*,.docx,, .xls,.mp4</span>
                            </a-form-item>
                        </a-col>
                    </a-form>
                </div>
            </a-modal>
            <!--          编辑子工单-->

            <!--          流转变更-->
            <a-modal
                centered
                v-model:visible="newState.circulationVisible"
                title="流转"
                width="520px"
                @ok="confirmCirculation"
                destroy-on-close
                :body-style="{
                    paddingBottom: 0
                }"
                :ok-button-props="{
                    loading: newState.changeStatusLoading
                }"
                @cancel="cancelCirculation"
            >
                <div class="change-status">
                    <a-form :model="newState.circulationForm" ref="circulationFormRef">
                        <a-row>
                            <a-col :span="24">
                                <a-form-item
                                    label="解决人"
                                    :rules="[{ required: true, message: '请选择解决人', trigger: 'blur' }]"
                                    name="solverList"
                                >
                                    <a-select
                                        class="remove-icon"
                                        show-search
                                        :allow-clear="false"
                                        mode="multiple"
                                        :options="state.allUser"
                                        v-model:value="newState.circulationForm.solverList"
                                        placeholder="请选择"
                                        :field-names="{ label: 'name', value: 'name' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                        @change="changeStatusSolverChange"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </a-modal>
            <!--          流转变更-->
            <!--          解决中变更-->
            <a-modal
                centered
                v-model:visible="newState.resolvingVisible"
                title="解决中"
                width="1000px"
                @ok="confirmResolving"
                destroy-on-close
                :body-style="{
                    paddingBottom: 0
                }"
                :ok-button-props="{
                    loading: newState.changeStatusLoading
                }"
                @cancel="cancelResolving"
            >
                <div class="change-status">
                    <a-form :model="newState.resolvingForm" ref="resolvingFormRef">
                        <a-row>
                            <a-col :span="24">
                                <a-form-item
                                    label="解决方案概述"
                                    :rules="[{ required: true, message: '请输入解决方案概述', trigger: 'blur' }]"
                                    name="solution"
                                >
                                    <a-textarea v-model:value="newState.resolvingForm.solution" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="24">
                                <a-form-item label="解决方案详述">
                                    <QuillEditor ref="resolvingQuillRef" :options="editorOption" class="quill-editor" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </a-modal>
            <!--          解决中变更-->
            <!--          已解决变更-->
            <a-modal
                centered
                v-model:visible="newState.resolvedVisible"
                title="已解决"
                width="1000px"
                :body-style="{
                    paddingBottom: 0
                }"
                @ok="confirmResolved"
                destroy-on-close
                :ok-button-props="{
                    loading: newState.changeStatusLoading
                }"
                @cancel="cancelResolved"
            >
                <div class="change-status">
                    <a-form :model="newState.resolvedForm" ref="resolvedFormRef">
                        <a-row>
                            <a-col :span="24">
                                <a-form-item
                                    label="解决方案概述"
                                    :rules="[{ required: true, message: '请输入解决方案概述', trigger: 'blur' }]"
                                    name="solution"
                                >
                                    <a-textarea v-model:value="newState.resolvedForm.solution" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="24">
                                <a-form-item label="解决方案详述">
                                    <QuillEditor ref="resolvedQuillRef" :options="editorOption" class="quill-editor"
                                /></a-form-item>
                            </a-col>
                        </a-row>
                        <a-col :span="24">
                            <a-form-item label="上传附件">
                                <a-upload
                                    v-model:file-list="newState.resolvedForm.attachmentList"
                                    :multiple="true"
                                    :before-upload="handlerResolvedUpload"
                                    @remove="handlerResolvedRemove"
                                    accept=".xlsx, image/*,.docx,, .xls,.mp4"
                                >
                                    <a-button type="primary">
                                        <upload-outlined />
                                        上传
                                    </a-button>
                                </a-upload>
                                <span>支持格式：.xlsx, image/*,.docx,, .xls,.mp4</span></a-form-item
                            >
                        </a-col>
                    </a-form>
                </div>
            </a-modal>
            <!--          已解决变更-->

            <!--          删除-->
            <a-modal
                centered
                v-model:visible="state.deleteVisible"
                title="删除"
                @ok="handleDelete"
                :ok-button-props="{ loading: state.deleteLoading }"
            >
                请确认是否删除该工单任务，如该工单建立了子工单请先对子工单进行解决后在进行删除操作。
            </a-modal>
            <!--          删除-->
            <div class="top-search">
                <div class="top-left">
                    <a-form :model="state.filter">
                        <a-row justify="space-between">
                            <a-col :span="5">
                                <a-form-item label="工单类型" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                    <a-select
                                        v-model:value="state.filter.type"
                                        :options="[
                                            {
                                                label: '产品问题',
                                                value: '产品问题'
                                            },
                                            {
                                                label: '数据问题',
                                                value: '数据问题'
                                            },
                                            {
                                                label: '算法问题',
                                                value: '算法问题'
                                            },
                                            {
                                                label: '系统故障',
                                                value: '系统故障'
                                            },
                                            {
                                                label: '产品需求',
                                                value: '产品需求'
                                            },
                                            {
                                                label: '算法需求',
                                                value: '算法需求'
                                            }
                                        ]"
                                        show-search
                                        allow-clear
                                        placeholder="请选择"
                                        :field-names="{ label: 'label', value: 'value' }"
                                        :filterOption="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item label="优先级" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                    <a-select
                                        v-model:value="state.filter.priority"
                                        :options="[
                                            {
                                                label: 'p0',
                                                value: 'p0'
                                            },
                                            {
                                                label: 'p1',
                                                value: 'p1'
                                            },
                                            {
                                                label: 'p2',
                                                value: 'p2'
                                            },
                                            {
                                                label: 'p3',
                                                value: 'p3'
                                            }
                                        ]"
                                        allow-clear
                                        placeholder="请选择"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item label="问题来源" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                    <a-select
                                        v-model:value="state.filter.questionSource"
                                        :options="[
                                            {
                                                label: '400',
                                                value: '400'
                                            },
                                            {
                                                label: '现场反馈',
                                                value: '现场反馈'
                                            },
                                            {
                                                label: '系统自检',
                                                value: '系统自检'
                                            }
                                        ]"
                                        show-search
                                        allow-clear
                                        placeholder="请选择"
                                        :field-names="{ label: 'label', value: 'value' }"
                                        :filterOption="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                            <!--                            <a-col :span="5">-->
                            <!--                                <a-form-item label="工单状态" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">-->
                            <!--                                    <a-select-->
                            <!--                                        v-model:value="state.filter.status"-->
                            <!--                                        :options="state.statusList"-->
                            <!--                                        show-search-->
                            <!--                                        allow-clear-->
                            <!--                                        placeholder="请选择"-->
                            <!--                                        :field-names="{ label: 'label', value: 'value' }"-->
                            <!--                                        :filterOption="-->
                            <!--                                            (input, option) => {-->
                            <!--                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0-->
                            <!--                                            }-->
                            <!--                                        "-->
                            <!--                                    />-->
                            <!--                                </a-form-item>-->
                            <!--                            </a-col>-->
                            <a-col :span="5">
                                <a-form-item label="是否超时" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                    <a-select
                                        v-model:value="state.filter.timeout"
                                        :options="[
                                            {
                                                label: '是',
                                                value: '是'
                                            },
                                            {
                                                label: '否',
                                                value: '否'
                                            }
                                        ]"
                                        show-search
                                        allow-clear
                                        placeholder="请选择"
                                        :field-names="{ label: 'label', value: 'value' }"
                                        :filterOption="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="4">
                                <a-form-item label="项目" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                    <a-tree-select
                                        v-model:value="state.filter.factoryCode"
                                        show-search
                                        style="width: 100%"
                                        placeholder="请选择"
                                        allow-clear
                                        :tree-data="state.treeData"
                                        :fieldNames="{
                                            children: 'children',
                                            label: 'nodeName',
                                            value: 'nodeCode',
                                            key: 'nodeCode'
                                        }"
                                        :filterTreeNode="
                                            (inputValue, treeNode) => {
                                                return (
                                                    treeNode.nodeName.toLowerCase().indexOf(inputValue.toLowerCase()) >=
                                                    0
                                                )
                                            }
                                        "
                                        :max-tag-count="1"
                                        @focus="getTreeData"
                                        @change="handleTreeChange"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row justify="space-between">
                            <a-col :span="5">
                                <a-form-item label="产品" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                    <a-select
                                        show-search
                                        v-model:value="state.filter.production"
                                        :options="state.productList"
                                        allow-clear
                                        placeholder="请选择"
                                        @focus="getProductList"
                                        :field-names="{ label: 'name', value: 'name' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item label="环境" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                    <a-select
                                        v-model:value="state.filter.environment"
                                        :options="state.searchEnvironmentList"
                                        show-search
                                        allow-clear
                                        placeholder="请选择"
                                        :field-names="{ label: 'name', value: 'name' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                        @focus="getSearchEnvironmentList"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item label="创建时间" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                    <a-range-picker
                                        v-model:value="state.filter.createdTimeList"
                                        value-format="YYYY-MM-DD"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }" label="创建人">
                                    <a-select
                                        show-search
                                        allow-clear
                                        :options="state.allUser"
                                        v-model:value="state.filter.createdByName"
                                        placeholder="请选择"
                                        :field-names="{ label: 'name', value: 'name' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="4">
                                <a-form-item :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }" label="解决人">
                                    <a-select
                                        show-search
                                        allow-clear
                                        :options="state.allUser"
                                        v-model:value="state.filter.solverName"
                                        placeholder="请选择"
                                        :field-names="{ label: 'name', value: 'name' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <!--                        <a-row justify="space-between">-->
                        <a-row>
                            <a-col :span="5">
                                <a-form-item :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }" label="项目经理">
                                    <a-select
                                        show-search
                                        allow-clear
                                        :options="state.pmNameList"
                                        v-model:value="state.filter.pmName"
                                        placeholder="请选择"
                                        :field-names="{ label: 'label', value: 'label' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }" label="PMO">
                                    <a-select
                                        show-search
                                        allow-clear
                                        :options="state.pmoList"
                                        v-model:value="state.filter.pmoName"
                                        placeholder="请选择"
                                        :field-names="{ label: 'label', value: 'label' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>

                            <a-col :span="5">
                                <a-form-item label="工单标题" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                    <a-input placeholder="请输入" v-model:value="state.filter.keyWords" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item label="工单编号" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                    <a-input placeholder="请输入" v-model:value="state.filter.number" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="4" style="display: flex; justify-content: end; align-items: start">
                                <a-space>
                                    <a-button type="primary" @click="getData(true)">查询</a-button>
                                    <a-button type="primary" ghost @click="resetData">重置</a-button>
                                </a-space>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </div>
            <div class="main">
                <a-spin v-model:spinning="dataLoading" tip="加载中">
                    <a-tabs v-model:activeKey="state.filter.status" @change="getData">
                        <a-tab-pane key="" tab="全部工单" />
                        <a-tab-pane key="待分发" tab="待分发" />
                        <a-tab-pane key="未开始" tab="未开始" />
                        <a-tab-pane key="解决中" tab="解决中" />
                        <a-tab-pane key="已解决" tab="已解决" />
                        <a-tab-pane key="已关闭" tab="已关闭" />
                        <a-tab-pane key="已回访" tab="已回访" />
                    </a-tabs>
                    <div class="main-title">
                        <div class="top-tip"
                            ><ExclamationCircleFilled class="tip-img" />
                            解决人接收流转的工单后，如距离计划解决时间较近，请及时联系创建人编辑调整，避免工单延期对自己造成影响</div
                        >
                        <a-space>
                            <a-form-item label="排序" style="margin: 0">
                                <a-select
                                    style="width: 150px"
                                    :options="state.sortList"
                                    v-model:value="state.sort"
                                    @change="getData"
                                    allow-clear
                                />
                            </a-form-item>
                            <a-button type="primary" @click="handleAdd">新建</a-button>
                            <a-button type="primary" @click="handleExpandAll" v-if="!newState.isExpandAll"
                                >全部展开</a-button
                            >
                            <a-button type="primary" @click="handleCollapseAll" v-else>全部折叠</a-button>
                        </a-space>
                    </div>
                    <div class="gd-scroll">
                        <div class="gd-item" v-for="(item, index) in state.dataList">
                            <a-collapse
                                :bordered="false"
                                expandIconPosition="right"
                                v-model:activeKey="state.collapseKey"
                                collapsible="disabled"
                            >
                                <template #expandIcon="{ isActive }"> </template>
                                <a-collapse-panel :key="item.id">
                                    <template #header>
                                        <div class="collapse-title" :style="getTitleStyle(item.status)">
                                            <div class="timeout" v-if="item.timeout === '是'">已超时</div>
                                            <div class="collapse-title-left">
                                                <div v-if="/(p0|P0)/i.test(item.priority)" class="ceycle0">P0</div>
                                                <div v-if="/(p1|P1)/i.test(item.priority)" class="ceycle1">P1</div>
                                                <div v-if="/(p2|P2)/i.test(item.priority)" class="ceycle2">P2</div>
                                                <div v-if="/(p3|P3)/i.test(item.priority)" class="ceycle3">P3</div>
                                                <div v-if="item.questionSource === '400'" class="ph-icon">400</div>
                                                <div v-if="item.questionSource === '现场反馈'" class="xc-icon"
                                                    >现场反馈</div
                                                >
                                                <div v-if="item.questionSource === '系统自检'" class="zj-icon"
                                                    >系统自检</div
                                                >
                                            </div>
                                            <div class="father-right"
                                                ><div class="father-title" :title="item.content">
                                                    <span
                                                        style="
                                                            border-right: 1px solid #d9d9d9;
                                                            padding-right: 8px;
                                                            margin-right: 5px;
                                                        "
                                                    >
                                                        {{ item.factoyName }}</span
                                                    >
                                                    {{ item.content }}
                                                </div>
                                                <div class="father-bottom" @click.stop="onClick">
                                                    <div class="father-bottom-left">
                                                        <div class="border-div">
                                                            <span class="collapse-title-font">创建人：</span>
                                                            <span class="collapse-content-font">{{
                                                                item.createdBy
                                                            }}</span>
                                                            <div class="border-line"></div>
                                                        </div>

                                                        <div class="border-div max-length">
                                                            <span class="collapse-title-font">解决人：</span>
                                                            <span class="collapse-content-font" :title="item.solver">{{
                                                                item.solver
                                                            }}</span>
                                                        </div>
                                                        <div class="border-div">
                                                            <div
                                                                style="
                                                                    position: absolute;
                                                                    width: 1px;
                                                                    height: 14px;
                                                                    background-color: #a5a6a7;
                                                                    left: -8px;
                                                                    top: 50%;
                                                                    transform: translate(-50%, -50%);
                                                                "
                                                            ></div>
                                                            <span class="collapse-title-font">解决进度：</span>
                                                            <span class="collapse-content-font">{{
                                                                item.progress
                                                            }}</span>
                                                            <div class="border-line"></div>
                                                        </div>
                                                        <div class="border-div">
                                                            <span class="collapse-title-font">创建时间：</span>
                                                            <span class="collapse-content-font">{{
                                                                item.createdTime
                                                            }}</span>
                                                            <div class="border-line"></div>
                                                        </div>
                                                        <div class="border-div">
                                                            <span class="collapse-title-font">工单类型：</span>
                                                            <span class="collapse-content-font">{{ item.type }}</span>
                                                            <div class="border-line"></div>
                                                        </div>
                                                        <div class="border-div">
                                                            <span class="collapse-title-font">状态：</span>
                                                            <span
                                                                class="collapse-content-font"
                                                                :style="getColorStyle(item.status)"
                                                                >{{ item.status }}</span
                                                            >
                                                        </div>
                                                    </div>
                                                    <div class="father-right-btn">
                                                        <a-button
                                                            type="primary"
                                                            ghost
                                                            size="small"
                                                            class="btn-item"
                                                            @click="showCirculation(item)"
                                                            :disabled="isCirculationDisabled(item)"
                                                            >流转
                                                        </a-button>
                                                        <template
                                                            v-if="['已解决', '已关闭', '已回访'].includes(item.status)"
                                                        >
                                                            <a-popconfirm
                                                                title="请确认是否重新打开工单？"
                                                                @confirm="handlerReOpen(item)"
                                                            >
                                                                <a-button
                                                                    type="primary"
                                                                    ghost
                                                                    size="small"
                                                                    class="btn-item"
                                                                    >重新打开</a-button
                                                                >
                                                            </a-popconfirm>
                                                        </template>

                                                        <template v-else>
                                                            <a-button
                                                                type="primary"
                                                                ghost
                                                                size="small"
                                                                class="btn-item"
                                                                @click="showResolving(item)"
                                                                :disabled="isResolvingDisabled(item)"
                                                                >解决中</a-button
                                                            >
                                                        </template>
                                                        <a-button
                                                            type="primary"
                                                            ghost
                                                            size="small"
                                                            class="btn-item"
                                                            @click="showResolved(item)"
                                                            :disabled="isResolvedDisabled(item)"
                                                            >已解决
                                                        </a-button>
                                                        <a-popconfirm
                                                            title="请确认是否关闭工单？"
                                                            :disabled="isCloseDisabled(item)"
                                                            @confirm="handlerClose(item)"
                                                        >
                                                            <a-button
                                                                type="primary"
                                                                ghost
                                                                size="small"
                                                                class="btn-item"
                                                                :disabled="isCloseDisabled(item)"
                                                                >关闭
                                                            </a-button>
                                                        </a-popconfirm>
                                                        <a-popconfirm
                                                            title="请确认是否已回访工单？"
                                                            @confirm="handleReturnVisit(item)"
                                                            :disabled="isReturnVisitDisabled(item)"
                                                        >
                                                            <a-button
                                                                type="primary"
                                                                ghost
                                                                size="small"
                                                                class="btn-item"
                                                                :disabled="isReturnVisitDisabled(item)"
                                                                >已回访
                                                            </a-button>
                                                        </a-popconfirm>

                                                        <a-button
                                                            type="primary"
                                                            ghost
                                                            size="small"
                                                            class="btn-item"
                                                            @click="handleDetail(item.id)"
                                                            >详情
                                                        </a-button>
                                                        <a-button
                                                            type="primary"
                                                            ghost
                                                            size="small"
                                                            class="btn-item"
                                                            @click="handleEdit(item)"
                                                            :disabled="!item.myCreated"
                                                            >编辑
                                                        </a-button>
                                                        <a-button
                                                            type="primary"
                                                            ghost
                                                            size="small"
                                                            class="btn-item"
                                                            @click="toDelete(item)"
                                                            :disabled="
                                                                !(
                                                                    (item.status === '未开始' ||
                                                                        item.status === '待分发') &&
                                                                    item.myCreated
                                                                )
                                                            "
                                                            >删除
                                                        </a-button>

                                                        <a-popconfirm
                                                            title="请确认是否提醒该工单相关人员？"
                                                            @confirm="toRmind(item.id)"
                                                            :disabled="!item.pmoOrNot"
                                                        >
                                                            <a-button
                                                                type="primary"
                                                                ghost
                                                                size="small"
                                                                class="btn-item"
                                                                :disabled="!item.pmoOrNot"
                                                                >催办
                                                            </a-button>
                                                        </a-popconfirm>
                                                        <div @click="toggleCollapse(item.id)">
                                                            <!--                                                        <button type="link">-->
                                                            <!--                                                            -->
                                                            <!--                                                        </button>-->
                                                            <span style="color: #3875ff; cursor: pointer">{{
                                                                isActive(item.id) ? '收起' : '展开'
                                                            }}</span>
                                                            <DoubleLeftOutlined
                                                                v-if="isActive(item.id)"
                                                                class="active-icon"
                                                            />
                                                            <DoubleRightOutlined v-else class="active-icon" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                    <div style="background: rgba(56, 117, 255, 0.1)" :style="getBorder(item.status)">
                                        <div class="title-border"></div>
                                    </div>
                                    <!--                           列表父工单-->
                                    <div class="item-inner" :style="getBorder(item.status)">
                                        <div class="item-content item-content1">
                                            <div class="inner">
                                                <div class="inner-title">工单编号：</div>
                                                <div class="inner-msg" :title="item.areaName">{{ item.number }}</div>
                                            </div>
                                            <div class="inner">
                                                <div class="inner-title">所属环境：</div>
                                                <div class="inner-msg">{{ item.environment }}</div>
                                            </div>
                                            <div class="inner">
                                                <div class="inner-title">PMO：</div>
                                                <div class="inner-msg">{{ item.pmo }}</div>
                                            </div>
                                        </div>
                                        <div class="item-content item-content2">
                                            <div class="inner">
                                                <div class="inner-title">所属区域：</div>
                                                <div class="inner-msg" :title="item.areaName">{{ item.areaName }}</div>
                                            </div>
                                            <div class="inner">
                                                <div class="inner-title">所属产品：</div>
                                                <div class="inner-msg" :item="item.production">{{
                                                    item.production
                                                }}</div>
                                            </div>
                                            <div class="inner">
                                                <div class="inner-title">计划完成时间：</div>
                                                <div class="inner-msg">{{ item.endTime }}</div>
                                            </div>
                                        </div>
                                        <div class="item-content item-content3">
                                            <div class="inner">
                                                <div class="inner-title">所属客户：</div>
                                                <div class="inner-msg" :title="item.customer">{{ item.customer }}</div>
                                            </div>
                                            <div class="inner">
                                                <div class="inner-title">版本：</div>
                                                <div class="inner-msg" :title="item.version">{{ item.version }}</div>
                                            </div>
                                            <div class="inner">
                                                <div class="inner-title">实际完成时间：</div>
                                                <div class="inner-msg">{{ item.finishTime }}</div>
                                            </div>
                                        </div>
                                        <div class="item-content item-content4">
                                            <div class="inner">
                                                <div class="inner-title">所属项目：</div>
                                                <div class="inner-msg" :title="item.projectName">{{
                                                    item.projectName
                                                }}</div>
                                            </div>
                                            <div class="inner">
                                                <div class="inner-title">项目经理：</div>
                                                <div class="inner-msg">{{ item.pmName }}</div>
                                            </div>
                                        </div>
                                    </div>

                                    <!--                           列表父工单-->
                                    <!--                         子工单-->
                                    <div
                                        class="collapse-bottom"
                                        v-if="item.subWorkOrderDtoList && item.subWorkOrderDtoList.length > 0"
                                    >
                                        <div
                                            class="item-children"
                                            v-for="(child, index) in item.subWorkOrderDtoList"
                                            :key="index"
                                        >
                                            <div class="child-title">
                                                <div class="child-title-left">
                                                    <div class="gd-title">{{ child.content }}</div>
                                                </div>
                                                <div class="collapse-title-right">
                                                    <div class="border-div">
                                                        <span class="collapse-title-font">创建人：</span>
                                                        <span class="collapse-content-font">{{ child.createdBy }}</span>
                                                        <div class="border-line"></div>
                                                    </div>
                                                    <div class="border-div">
                                                        <span class="collapse-title-font">创建时间：</span>
                                                        <span class="collapse-content-font">{{
                                                            child.createdTime
                                                        }}</span>
                                                        <div class="border-line"></div>
                                                    </div>
                                                    <div class="border-div">
                                                        <span class="collapse-title-font">状态：</span>
                                                        <span class="collapse-content-font">{{ child.status }}</span>
                                                    </div>
                                                    <div class="collapse-title-right-btn">
                                                        <a-button
                                                            type="primary"
                                                            ghost
                                                            size="small"
                                                            class="btn-item"
                                                            @click="showCirculation(child)"
                                                            :disabled="isCirculationDisabled(child)"
                                                            >流转
                                                        </a-button>
                                                        <a-button
                                                            type="primary"
                                                            ghost
                                                            size="small"
                                                            class="btn-item"
                                                            @click="showResolving(child)"
                                                            :disabled="isResolvingDisabled(child)"
                                                            >解决中
                                                        </a-button>
                                                        <a-button
                                                            type="primary"
                                                            ghost
                                                            size="small"
                                                            class="btn-item"
                                                            @click="showResolved(child)"
                                                            :disabled="isResolvedDisabled(child)"
                                                            >已解决
                                                        </a-button>
                                                        <a-button
                                                            type="primary"
                                                            ghost
                                                            size="small"
                                                            class="btn-item"
                                                            @click="handleSonDetail(child.id)"
                                                            >详情
                                                        </a-button>
                                                        <a-button
                                                            type="primary"
                                                            ghost
                                                            size="small"
                                                            class="btn-item"
                                                            @click="editSon(child)"
                                                            :disabled="!child.myCreated"
                                                            >编辑
                                                        </a-button>
                                                        <a-button
                                                            type="primary"
                                                            ghost
                                                            size="small"
                                                            class="btn-item"
                                                            :disabled="
                                                                !(
                                                                    (child.status === '未开始' ||
                                                                        child.status === '待分发') &&
                                                                    child.myCreated
                                                                )
                                                            "
                                                            @click="toDelete(child)"
                                                            >删除
                                                        </a-button>

                                                        <a-popconfirm
                                                            title="请确认是否提醒该工单相关人员？"
                                                            @confirm="toRmind(child.id)"
                                                            :disabled="!child.pmoOrNot"
                                                        >
                                                            <a-button
                                                                type="primary"
                                                                ghost
                                                                size="small"
                                                                class="btn-item"
                                                                :disabled="!child.pmoOrNot"
                                                            >
                                                                催办
                                                            </a-button>
                                                        </a-popconfirm>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="child-inner">
                                                <div class="child-content">
                                                    <div class="inner-main">
                                                        <div class="border-line"></div>
                                                        <span class="inner-title">工单编号：</span>
                                                        <div class="inner-msg">{{ child.number }}</div>
                                                    </div>
                                                </div>
                                                <div class="child-content">
                                                    <div class="inner-main">
                                                        <div class="border-line"></div>
                                                        <span class="inner-title">解决人：</span>
                                                        <div class="inner-msg">{{ child.solver }}</div>
                                                    </div>
                                                </div>
                                                <div class="child-content">
                                                    <div class="inner-main">
                                                        <div class="border-line"></div>
                                                        <span class="inner-title">计划解决时间：</span>
                                                        <div class="inner-msg">{{ child.endTime }}</div>
                                                    </div>
                                                </div>
                                                <div class="child-content">
                                                    <div class="inner-main">
                                                        <span class="inner-title">实际解决时间：</span>
                                                        <div class="inner-msg">{{ child.finishTime }}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--                         子工单-->
                                </a-collapse-panel>
                            </a-collapse>
                        </div>
                    </div>
                </a-spin>
            </div>
            <div class="pagination-div">
                <a-pagination
                    v-model:current="pagination.current"
                    :total="pagination.total"
                    :show-total="pagination.showTotal"
                    :page-size="pagination.pageSize"
                    show-quick-jumper
                    @show-size-change="pageSizeChange"
                    @change="pageChange"
                />
            </div>
            <!-- end vid_56q5auz3n0 自定义模板_9naw5vucd4 -->
            <!-- begin vid_qm6uj3uc2d 图片_oyechqv0p3 -->
            <al-image
                v-if="false"
                class="vid_qm6uj3uc2d"
                :emptyImgSrc="''"
                :src="vid_qm6uj3uc2d_props.src"
            />
            <!-- end vid_qm6uj3uc2d 图片_oyechqv0p3 -->
            <!-- begin vid_wvjq4lo2yf 图片_iaiexyrfqt -->
            <al-image
                v-if="false"
                class="vid_wvjq4lo2yf"
                :emptyImgSrc="''"
                :src="vid_wvjq4lo2yf_props.src"
            />
            <!-- end vid_wvjq4lo2yf 图片_iaiexyrfqt -->
            <!-- begin vid_wby2nignvk 图片_czm1uqu1ms -->
            <al-image
                v-if="false"
                class="vid_wby2nignvk"
                :emptyImgSrc="''"
                :src="vid_wby2nignvk_props.src"
            />
            <!-- end vid_wby2nignvk 图片_czm1uqu1ms -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')
    const vid_qm6uj3uc2d_imageUrl = 'http://10.40.0.33:9001/file-storage/469958199879835648.png'

    const vid_qm6uj3uc2d_props = reactive({
        src: vid_qm6uj3uc2d_imageUrl
    })
    const vid_wvjq4lo2yf_imageUrl = 'http://10.40.0.33:9001/file-storage/469958216751423488.png'

    const vid_wvjq4lo2yf_props = reactive({
        src: vid_wvjq4lo2yf_imageUrl
    })
    const vid_wby2nignvk_imageUrl = 'http://10.40.0.33:9001/file-storage/469958229367889920.png'

    const vid_wby2nignvk_props = reactive({
        src: vid_wby2nignvk_imageUrl
    })

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    //     富文本设置
    import { nextTick } from 'vue'
    onMounted(() => {
        const urlParams = new URLSearchParams(window.location.search)
        // 获取单个参数
        state.filter.keyWords = urlParams.get('name')
        getAllUser()
        getPmName()
        getPmo()
        getData()
        getAreaList()
        getCustomerList()
        getProjectList()
    })
    const dataLoading = ref(false)
    import { QuillEditor, Quill } from '@vueup/vue-quill'
    import ImageUploader from 'quill-image-uploader'
    import '@vueup/vue-quill/dist/vue-quill.snow.css'
    const titleConfig = [
        { Choice: ' .ql-bold', title: '加粗' },
        { Choice: ' .ql-italic', title: '斜体' },
        { Choice: ' .ql-underline', title: '下划线' },
        { Choice: ' .ql-strike', title: '删除线' },
        { Choice: ' .ql-blockquote', title: '块引用' },
        { Choice: ' .ql-code-block', title: '插入代码' },
        { Choice: ' .ql-size', title: '字体大小' },
        { Choice: ' .ql-size', title: '字体大小' },
        { Choice: ' .ql-color', title: '字体颜色' },
        { Choice: ' .ql-background', title: '字体背景颜色' },
        { Choice: ' .ql-list[value="ordered"]', title: '有序列表' },
        { Choice: ' .ql-list[value="bullet"]', title: '无序列表' },
        { Choice: ' .ql-header[value="1"]', title: '1级标题' },
        { Choice: ' .ql-header[value="2"]', title: '2级标题' },
        { Choice: ' .ql-align', title: '对齐方式' },
        { Choice: ' .ql-clean', title: '清除字体格式' },
        { Choice: ' .ql-image', title: '图像' },
        { Choice: ' .ql-size .ql-picker-item[data-value="small"]', title: '小号' },
        { Choice: ' .ql-size .ql-picker-item[data-value="large"]', title: '大号' },
        { Choice: ' .ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
        { Choice: ' .ql-size .ql-picker-item:nth-child(2)', title: '标准' },
        { Choice: ' .ql-align .ql-picker-item:first-child', title: '居左对齐' },
        { Choice: ' .ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
        { Choice: ' .ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
        { Choice: ' .ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
    ]
    // 注册图片上传模块
    Quill.register('modules/imageUploader', ImageUploader)

    // 将本地文件转换为URL
    const getLocalImageURL = file => {
        return new Promise(resolve => {
            const reader = new FileReader()
            reader.onload = e => {
                resolve(e.target.result)
            }
            reader.readAsDataURL(file)
        })
    }

    // 表单数据

    // Quill 编辑器选项
    const editorOption = ref({
        modules: {
            // imageUploader: {
            //     upload: async file => {
            //         const localUrl = await getLocalImageURL(file)
            //         return localUrl // 返回本地图片的 URL 进行预览
            //     }
            // },
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
                ['blockquote', 'code-block'], // 引用，代码块
                [{ header: 1 }, { header: 2 }], // 标题1，标题2
                [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
                [{ size: ['small', false, 'large', 'huge'] }], // 文字大小
                [{ color: [] }, { background: [] }], // 字体颜色，背景颜色
                [{ align: [] }], // 对齐
                ['clean'], // 清除格式
                ['image'] // 链接，图片，视频
            ]
            // ImageUploader: imageHandler
        }
    })

    // 将 dataURL 转换为 File 对象的辅助函数
    const dataURLtoFile = (dataurl, filename) => {
        const arr = dataurl.split(',')
        const mime = arr[0].match(/:(.*?);/)[1]
        const bstr = atob(arr[1])
        let n = bstr.length
        const u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], filename, { type: mime })
    }

    function initTitle() {
        document.getElementsByClassName('ql-editor')[0].dataset.placeholder = ''
        for (let item of titleConfig) {
            let tip = document.querySelector('.ql-toolbar' + item.Choice)
            if (!tip) continue
            tip.setAttribute('title', item.title)
        }
    }
    //     富文本设置
    const pageSizeChange = (current, size) => {
        pagination.value.current = current
        pagination.value.pageSize = size
        getData()
    }
    const pageChange = (page, pageSize) => {
        pagination.value.current = page
        pagination.value.pageSize = pageSize
        getData()
    }
    const pagination = ref({
        current: 1,
        pageSize: 10,
        showSizeChanger: true,
        total: 0,
        pageSizeOptions: ['20', '40', '60', '80', '100'],
        showTotal: total =>
            `共 ${total} 个项目 第 ${pagination.value.current}/${Math.ceil(total / pagination.value.pageSize)}页`
    })
    // const activeKey = ref('全部工单')
    const state = reactive({
        filter: {
            type: undefined,
            priority: undefined,
            questionSource: undefined,
            status: '',
            timeout: undefined,
            keyWords: undefined,
            number: undefined,
            factoryCode: undefined,
            production: undefined,
            pmName: undefined,
            pmoName: undefined,
            environment: undefined,
            createdByName: undefined,
            solverName: undefined,
            factoryType: undefined,
            createdTimeList: []
        },
        activeKey: "''",
        treeData: [],
        statusList: [
            {
                label: '未开始',
                value: '未开始'
            },
            {
                label: '解决中',
                value: '解决中'
            },
            {
                label: '已解决',
                value: '已解决'
            },
            {
                label: '已关闭',
                value: '已关闭'
            },
            {
                label: '已回访',
                value: '已回访'
            }
        ],
        changeStausList: [
            {
                label: '正在处理',
                value: '正在处理'
            },
            {
                label: '已解决',
                value: '已解决'
            },
            {
                label: '无需解决',
                value: '无需解决'
            },
            {
                label: '申请流转',
                value: '申请流转'
            }
        ],
        changeHaveSonStausList: [],
        sortList: [
            {
                label: '工单类型正序',
                value: 'type-asc'
            },
            {
                label: '工单类型倒序',
                value: 'type-desc'
            },
            {
                label: '优先级正序',
                value: 'priority-asc'
            },
            {
                label: '优先级倒序',
                value: 'priority-desc'
            },
            {
                label: '工单状态正序',
                value: 'status-asc'
            },
            {
                label: '工单状态倒序',
                value: 'status-desc'
            },
            {
                label: '工单解决进度正序',
                value: 'progress-asc'
            },
            {
                label: '工单解决进度倒序',
                value: 'progress-desc'
            },
            {
                label: '所属区域正序',
                value: 'area_code-asc'
            },
            {
                label: '所属区域倒序',
                value: 'area_code-desc'
            },
            {
                label: '所属项目阶段正序',
                value: 'milepost_id-asc'
            },
            {
                label: '所属项目阶段倒序',
                value: 'milepost_id-desc'
            },
            {
                label: '所属客户正序',
                value: 'customer-asc'
            },
            {
                label: '所属客户倒序',
                value: 'customer-desc'
            },
            {
                label: '所属产品正序',
                value: 'production-asc'
            },
            {
                label: '所属产品倒序',
                value: 'production-desc'
            },
            {
                label: '所属环境正序',
                value: 'environment-asc'
            },
            {
                label: '所属环境倒序',
                value: 'environment-desc'
            },
            {
                label: '创建人正序',
                value: 'created_by-asc'
            },
            {
                label: '创建人倒序',
                value: 'created_by-desc'
            },
            {
                label: '创建时间正序',
                value: 'created_time-asc'
            },
            {
                label: '创建时间倒序',
                value: 'created_time-desc'
            },
            {
                label: '解决人正序',
                value: 'solver-asc'
            },
            {
                label: '解决人倒序',
                value: 'solver-desc'
            },
            {
                label: '计划完成时间正序',
                value: 'end_time-asc'
            },
            {
                label: '计划完成时间倒序',
                value: 'end_time-desc'
            },
            {
                label: '实际完成时间正序',
                value: 'finish_time-asc'
            },
            {
                label: '实际完成时间倒序',
                value: 'finish_time-desc'
            }
        ],
        dataList: [],
        sort: 'created_time-desc',
        collapseKey: [],
        addOrEditVisible: false,
        modalTitle: '',
        modalForm: {
            content: undefined,
            type: undefined,
            priority: undefined,
            questionSource: undefined,
            workHours: undefined,
            endTime: undefined,
            areaCode: undefined,
            projectId: undefined,
            version: undefined,
            customer: undefined,
            production: undefined,
            environment: undefined,
            description: undefined,
            solverList: [],
            descriptionAttachmentList: [],
            qillData: ''
        },
        fatherLoading: false,
        sonLoading: false,
        editSonVisible: false,
        sonForm: {
            content: undefined,
            type: undefined,
            priority: undefined,
            questionSource: undefined,
            workHours: undefined,
            endTime: undefined,
            areaCode: undefined,
            projectId: undefined,
            version: undefined,
            customer: undefined,
            production: undefined,
            environment: undefined,
            description: undefined,
            solverList: [],
            descriptionAttachmentList: [],
            quillData: ''
        },
        deleteLoading: false,
        fileList: [
            {
                id: 1
            }
        ],
        fileVisible: false,
        remarkVisible: false,
        remarks: '',
        changeHaveSonStatusVisible: false,
        changeStatusForm: {
            status: undefined,
            reason: '',
            attachmentList: [],
            workOrderId: undefined,
            solution: undefined
        },

        deleteVisible: false,
        areaList: [],
        projectList: [],
        milepostList: [],
        customList: [],
        environmentList: [],
        searchEnvironmentList: [],
        productList: [
            {
                label: '大模型平台',
                value: '大模型平台'
            },
            {
                label: '水泥配料',
                value: '水泥配料'
            },
            {
                label: '其他',
                value: '其他'
            }
        ],
        allUser: [],
        pmoList: [],
        pmNameList: [],
        previewImage: '',
        previewVisible: false
    })
    function getPmo() {
        get('/solution-ppm/api/v2/built-in-system-ppm/work_order/role/search/PMO').then(data => {
            state.pmoList = data.data.map(item => {
                return {
                    label: item,
                    value: item
                }
            })
        })
    }
    function getPmName() {
        get('/solution-ppm/api/v2/built-in-system-ppm/work_order/role/search/PM').then(data => {
            state.pmNameList = data.data.map(item => {
                return {
                    label: item,
                    value: item
                }
            })
        })
    }
    // 获取环境
    function getEnvironmentList() {
        let customerId = state.customList.find(item => item.name === state.modalForm.customer)?.id
        console.log(customerId)
        get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/env?customerId=${customerId ? customerId : ''}`).then(
            data => {
                state.environmentList = data.data
            }
        )
    }
    // 获取筛选环境
    function getSearchEnvironmentList() {
        get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/env_distinct`).then(data => {
            state.searchEnvironmentList = data.data
        })
    }
    // 获取产品
    // 产品
    function getProductList() {
        let envId = state.environmentList.find(item => item.name === state.modalForm.environment)?.id
        get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/product?envId=${envId ? envId : ''}`).then(data => {
            state.productList = data.data
        })
    }
    // 获取版本
    function getVersionList() {
        let envId = state.environmentList.find(item => item.name === state.modalForm.environment)?.id
        let productId = state.productList.find(item => item.name === state.modalForm.production)?.id
        get(
            `/solution-ppm/api/v2/built-in-system-ppm/work_order/version?envId=${envId ? envId : ''}&productId=${
                productId ? productId : ''
            }`
        ).then(data => {
            state.modalForm.version = data.data
        })
    }
    // 客户改变如果没有选区域自动带区域
    function customerChange() {
        let arae = state.customList.find(item => item.name === state.modalForm.customer)
        if (arae) {
            state.modalForm.areaCode = arae.areaCode
        }
    }
    // 区域变
    function areaChange() {
        state.modalForm.customer =
            state.modalForm.projectId =
            state.modalForm.environment =
            state.modalForm.production =
            state.modalForm.version =
                undefined
    }
    // 项目变
    function projectChange() {
        state.modalForm.environment = state.modalForm.production = state.modalForm.version = undefined
    }
    // 环境变
    function environmentChange() {
        state.modalForm.production = state.modalForm.version = undefined
    }
    // 产品变
    function productChange() {
        state.modalForm.version = undefined
        getVersionList()
    }
    //     跳父详情
    function handleDetail(id) {
        window.open(`${import.meta.env.VITE_PUBLIC_PATH}/page/3000000785?id=${id}`, '_blank')
        // router.push(`${import.meta.env.VITE_PUBLIC_PATH}/page/3000000785?id=${id}`)
    }
    // 跳子详情
    function handleSonDetail(id) {
        window.open(`${import.meta.env.VITE_PUBLIC_PATH}/page/3000000787?id=${id}&url=3000000784`, '_blank')
        // router.push(`${import.meta.env.VITE_PUBLIC_PATH}/page/3000000787?id=${id}&url=3000000784`)
    }
    //     跳审批
    function handelApprove() {
        router.push(`${import.meta.env.VITE_PUBLIC_PATH}/page/3000000788`)
    }
    const currentData = ref({})
    //     新建工单
    function handleAdd() {
        resetCurrentData()
        state.addOrEditVisible = true
        state.modalTitle = '新建工单'

        nextTick(() => {
            initTitle()
            quillEditor.value.setContents('')
        })
    }
    function getTreeData() {
        get('/solution-ppm/api/v2/built-in-system-ppm/work_order/tree/search').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.treeData = data.data
        })
    }
    // 获取类型
    function handleTreeChange(value, label, extra) {
        if (value && extra) {
            const selectedNode = extra.triggerNode.props // 获取选中的节点
            if (selectedNode) {
                const type = selectedNode.nodeType // 获取type字段
                // 将type字段传递给后端
                if (type) {
                    state.filter.factoryType = type
                }
            }
        } else {
            state.filter.factoryType = undefined
        }
    }
    //     编辑工单
    async function handleEdit(record) {
        await resetCurrentData()
        currentData.value = record
        await Object.assign(state.modalForm, record)

        // 按顺序调用函数
        await getCustomerList() // 获取客户列表
        await getProjectList() // 获取项目列表
        await getEnvironmentList() // 获取环境列表
        await getProductList() // 获取产品列表

        // 显示模态框
        state.addOrEditVisible = true

        // 使用 nextTick 确保 DOM 更新后再执行
        nextTick(() => {
            get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/details/${record.id}`).then(data => {
                let descriptionData = JSON.parse(data.data.workOrderDto.description)
                quillEditor.value.setContents(descriptionData)
            })
        })

        state.modalTitle = '编辑工单'
    }

    // 区域
    function getAreaList() {
        get('/solution-ppm/api/v2/built-in-system-ppm/work_order/area_info').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.areaList = data.data.map(item => {
                return {
                    label: item.areaName,
                    value: item.areaCode
                }
            })
        })
    }
    // 项目
    function getProjectList() {
        if (state.modalForm.areaCode) {
            get(
                `/solution-ppm/api/v2//built-in-system-ppm/work_order/project_by_area_code/${state.modalForm.areaCode}`
            ).then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                state.projectList = data.data
            })
        } else {
            get(`/solution-ppm/api/v2//built-in-system-ppm/work_order/project_by_area_code/0`).then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                state.projectList = data.data
            })
        }
    }
    function getCustomerList() {
        get(
            `/solution-ppm/api/v2/built-in-system-ppm/work_order/customer?areaCode=${
                state.modalForm.areaCode ? state.modalForm.areaCode : ''
            }`
        ).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.customList = data.data
        })
    }

    //     父工单提交表单
    function submit() {
        formRef.value.validate().then(async () => {
            state.fatherLoading = true
            const deltaContent = quillEditor.value.getContents()

            const imageUploadPromises = []

            deltaContent.ops.forEach(op => {
                if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
                    const localSrc = op.insert.image

                    // 如果是 base64 图片，上传并替换为 URL
                    const file = dataURLtoFile(localSrc, 'image.png') // 将 base64 转换为 File 对象

                    const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
                        // 替换 op 中的 base64 URL 为服务器返回的 URL
                        op.insert.image = fullUrl
                    })

                    imageUploadPromises.push(uploadPromise)
                }
            })
            try {
                await Promise.all(imageUploadPromises)
                if (currentData.value.id) {
                    // 编辑保存逻辑
                    const params = { ...state.modalForm }
                    params.description = JSON.stringify(deltaContent)
                    put('/solution-ppm/api/v2/built-in-system-ppm/work_order', params)
                        .then(data => {
                            if (data.code !== 200) {
                                message.error(data.message)
                                return
                            }
                            message.success(data.message)
                            state.addOrEditVisible = false
                            resetFather()
                            getData()
                        })
                        .finally(() => {
                            state.fatherLoading = false
                        })
                } else {
                    // 新建保存逻辑
                    const params = { ...state.modalForm }
                    params.description = JSON.stringify(deltaContent)
                    post('/solution-ppm/api/v2/built-in-system-ppm/work_order', params)
                        .then(data => {
                            if (data.code !== 200) {
                                message.error(data.message)
                                return
                            }
                            message.success(data.message)
                            state.addOrEditVisible = false
                            resetFather()
                            getData()
                        })
                        .finally(() => {
                            state.fatherLoading = false
                        })
                }
            } catch (error) {
                state.fatherLoading = false
                console.error('图片上传失败', error)
                return // 终止提交
            }
        })
    }
    function fatherCancel() {
        state.addOrEditVisible = false
        resetFather()
    }
    function resetFather() {
        state.modalForm = {
            content: undefined,
            type: undefined,
            priority: undefined,
            questionSource: undefined,
            workHours: undefined,
            endTime: undefined,
            areaCode: undefined,
            projectId: undefined,
            version: undefined,
            customer: undefined,
            production: undefined,
            environment: undefined,
            description: undefined,
            solverList: [],
            fileList: [],
            qillData: ''
        }
    }
    function resetSon() {
        state.sonForm = {
            content: undefined,
            type: undefined,
            priority: undefined,
            questionSource: undefined,
            workHours: undefined,
            endTime: undefined,
            areaCode: undefined,
            projectId: undefined,
            version: undefined,
            customer: undefined,
            production: undefined,
            environment: undefined,
            description: undefined,
            solverList: [],
            fileList: [],
            quillData: ''
        }
    }
    const formRef = ref(null)
    // 上传API
    const uploadFileAPI = async file => {
        const data = new FormData()
        data.append('file', file)

        return post('/file-storage/api/v1/file/upload', data)
            .then(({ data: { fullUrl } }) => {
                return { data: { fullUrl } }
            })
            .catch(error => {
                console.error('上传图片出错:', error)
                throw error // 抛出错误以供外部处理
            })
    }

    //     子工单编辑
    function editSon(record) {
        resetCurrentData()
        currentData.value = record
        state.editSonVisible = true
        Object.assign(state.sonForm, record)
        nextTick(() => {
            get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/details/${record.id}`).then(data => {
                let descriptionData = JSON.parse(data.data.workOrderDto.description)
                sonQuillRef.value.setContents(descriptionData)
            })
        })
    }
    const sonRef = ref(null)
    //     子工单编辑保存
    function submitSon() {
        state.sonLoading = true
        sonRef.value.validate().then(async () => {
            const deltaContent = sonQuillRef.value.getContents()
            const imageUploadPromises = []
            deltaContent.ops.forEach(op => {
                if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
                    const localSrc = op.insert.image

                    // 如果是 base64 图片，上传并替换为 URL
                    const file = dataURLtoFile(localSrc, 'image.png') // 将 base64 转换为 File 对象

                    const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
                        // 替换 op 中的 base64 URL 为服务器返回的 URL
                        op.insert.image = fullUrl
                    })

                    imageUploadPromises.push(uploadPromise)
                }
            })
            try {
                await Promise.all(imageUploadPromises)

                const params = { ...state.sonForm }
                params.description = JSON.stringify(deltaContent)
                put('/solution-ppm/api/v2/built-in-system-ppm/work_order', params)
                    .then(data => {
                        if (data.code !== 200) {
                            message.error(data.message)
                            return
                        }
                        message.success(data.message)
                        state.editSonVisible = false
                        resetSon()
                        getData()
                    })
                    .finally(() => {
                        state.sonLoading = false
                    })
            } catch (error) {
                console.error('图片上传失败', error)
                state.sonLoading = false
                return // 终止提交
            }
        })
    }

    // 父上传文件
    function handlerFatherUpload(file) {
        state.fatherLoading = true
        const data = new FormData()
        data.append('file', file)

        post('/file-storage/api/v1/file/upload', data)
            .then(({ data: { fullUrl } }) => {
                if (data) {
                    // 新文件对象
                    const newFile = {
                        uid: file.uid,
                        lastModified: file.lastModified,
                        name: file.name,
                        size: file.size,
                        type: file.type,
                        status: 'done',
                        url: fullUrl
                    }

                    // 去重，保留一个副本
                    state.modalForm.descriptionAttachmentList = [
                        // 保留已存在文件（去除重复）
                        ...state.modalForm.descriptionAttachmentList.filter(
                            item => item.uid !== file.uid && item.name !== file.name
                        ),
                        // 添加新的文件
                        newFile
                    ]
                }
                state.fatherLoading = false
            })
            .catch(e => {
                message.error('上传失败' + e)
            })

        return false
    }
    // 父移除文件
    function handlerFatherRemove(file) {
        state.modalForm.descriptionAttachmentList = state.modalForm.descriptionAttachmentList.filter(
            item => item.uid !== file.uid
        )
    }
    // 父上传文件

    // 子上传附件
    function handlerSonUpload(file) {
        state.sonLoading = true
        const data = new FormData()
        data.append('file', file)

        post('/file-storage/api/v1/file/upload', data)
            .then(({ data: { fullUrl } }) => {
                if (data) {
                    // 新文件对象
                    const newFile = {
                        uid: file.uid,
                        lastModified: file.lastModified,
                        name: file.name,
                        size: file.size,
                        type: file.type,
                        status: 'done',
                        url: fullUrl
                    }

                    // 去重，保留一个副本
                    state.sonForm.descriptionAttachmentList = [
                        // 保留已存在文件（去除重复）
                        ...state.sonForm.descriptionAttachmentList.attachmentList.filter(
                            item => item.uid !== file.uid && item.name !== file.name
                        ),
                        // 添加新的文件
                        newFile
                    ]
                }
                state.sonLoading = false
            })
            .catch(e => {
                message.error('上传失败' + e)
            })

        return false
    }
    function handlerSonRemove(file) {
        state.sonForm.descriptionAttachmentList = state.sonForm.descriptionAttachmentList.filter(
            item => item.uid !== file.uid
        )
    }
    // 子上传附件

    function resetCurrentData() {
        currentData.value = {}
    }
    const quillEditor = ref(null) // 引用QuillEditor组件
    const sonQuillRef = ref(null) // 引用QuillEditor组件
    const taskPeopleList = ref([])
    function handlerAddPeople(name) {
        if (state.modalForm.solverList.indexOf(name) !== -1) {
            state.modalForm.solverList = state.modalForm.solverList.filter(item => item !== name)
        } else {
            state.modalForm.solverList[0] = name
        }
    }
    function handlerAddSonPeople(name) {
        if (state.sonForm.solverList.indexOf(name) !== -1) {
            state.sonForm.solverList = state.sonForm.solverList.filter(item => item !== name)
        } else {
            state.sonForm.solverList[0] = name
        }
    }
    function getAllUser() {
        get('/solution-ppm/api/v2/built-in-system-ppm/pmgf/get/allUser').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.allUser = data.data.userDtoList
        })
    }
    // 获取列表
    function getData(flag) {
        if (flag) {
            pagination.value.current = 1
        }
        dataLoading.value = true
        post('/solution-ppm/api/v2/built-in-system-ppm/work_order/search', {
            ...state.filter,
            pageSize: pagination.value.pageSize,
            pageNo: pagination.value.current,
            directionField: state.sort
        })
            .then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                state.dataList = data.data.content
                pagination.value.total = data.data.totalElements
                console.log('Total:', pagination.value.total) // 打印 total 确认是否正确
                if (data.data.content.length > 0) {
                    state.collapseKey.push(state.dataList[0].id)
                }
            })
            .finally(() => {
                dataLoading.value = false
            })
    }
    function resetData() {
        state.filter = {
            type: undefined,
            priority: undefined,
            questionSource: undefined,
            status: state.filter.status,
            timeout: undefined,
            keyWords: undefined,
            number: undefined,
            factoryCode: undefined,
            production: undefined,
            pmName: undefined,
            pmoName: undefined,
            environment: undefined,
            createdByName: undefined,
            solverName: undefined,
            factoryType: undefined,
            createdTimeList: []
        }
        pagination.value.current = 1
        pagination.value.pageSize = 10
        getData()
    }

    //     计算解决时间
    function getSolveTime() {
        // 获取当前时间
        let currentDate = dayjs()
        let num = state.modalForm.workHours
        // 计算新时间
        let newDate = currentDate.add(num, 'hour')

        // 格式化新时间为 "YYYY-MM-DD HH:mm" 格式
        let formattedDate = newDate.format('YYYY-MM-DD HH:mm:ss')

        state.modalForm.endTime = formattedDate
    }
    function hanldeTypeChange() {
        if (state.modalForm.type === '产品需求') {
            state.modalForm.priority = 'p3'
            getSolveTimeByType('p3')
        } else {
            state.modalForm.priority = state.modalForm.endTime = state.modalForm.workHours = undefined
        }
    }
    //     根据类型获取解决时间
    function getSolveTimeByType(type) {
        let num = 0
        if (type == 'p0') {
            num = 2
            state.modalForm.workHours = 2
        } else if (type == 'p1') {
            num = 24
            state.modalForm.workHours = 24
        } else if (type == 'p2') {
            num = 48
            state.modalForm.workHours = 48
        } else if (type == 'p3') {
            num = 48
            state.modalForm.workHours = 336
        }
        getSolveTime()
    }
    function handlerDownload(item) {
        pageLoading.loading = true
        pageLoading.tip = '文件下载中...'
        fetch(item.url)
            .then(response => response.blob())
            .then(blob => {
                const downloadLink = document.createElement('a')
                const url = URL.createObjectURL(blob)
                downloadLink.href = url
                downloadLink.setAttribute('download', item.name)
                downloadLink.style.display = 'none'
                document.body.appendChild(downloadLink)
                downloadLink.click()
                document.body.removeChild(downloadLink)

                // Release the object URL after the download
                URL.revokeObjectURL(url)
                pageLoading.loading = false
            })
            .catch(err => {
                console.error('Download failed', err)
            })
    }

    function handleDelete() {
        state.deleteLoading = true
        del(`/solution-ppm/api/v2/built-in-system-ppm/work_order/${currentData.value.id}`)
            .then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                message.success(data.message)
                state.deleteVisible = false
                getData()
            })
            .finally(() => {
                state.deleteLoading = false
            })
    }
    function toDelete(record) {
        resetCurrentData()
        currentData.value = record
        state.deleteVisible = true
    }
    //     预览图片
    function previewAttachment(item) {
        // 检查附件类型
        if (item.type.startsWith('image')) {
            state.previewImage = item.url // 设置预览图片的URL
            state.previewVisible = true // 显示模态框
        } else {
            // state.isImagePreview = false;
            // // 如果是其他类型的文件，直接在模态框中显示
            // state.previewFileUrl = item.url; // 设置预览文件的URL
            message.info('目前仅支持图片预览')
        }
    }
    //    新需求
    const newState = reactive({
        changeStatusLoading: false,
        isExpandAll: false,
        circulationVisible: false,
        resolvingVisible: false,
        resolvedVisible: false,
        circulationForm: {
            solverList: [],
            status: '流转'
        },
        resolvingForm: {
            solution: '',
            status: '解决中',
            solutionDetail: ''
        },
        resolvedForm: {
            solution: '',
            attachmentList: [],
            status: '已解决',
            solutionDetail: ''
        },
        closeForm: {
            status: '关闭'
        },
        workOrderId: undefined
    })
    const circulationFormRef = ref(null)
    const resolvingFormRef = ref(null)
    const resolvedFormRef = ref(null)
    const resolvingQuillRef = ref(null)
    const resolvedQuillRef = ref(null)
    //     全部展开
    function handleExpandAll() {
        newState.isExpandAll = true
        state.dataList.forEach(item => {
            state.collapseKey.push(item.id)
        })
    }
    //     全部折叠
    function handleCollapseAll() {
        newState.isExpandAll = false
        state.collapseKey = []
    }
    // 流转处理
    function confirmCirculation() {
        circulationFormRef.value.validate().then(() => {
            newState.changeStatusLoading = true
            newState.circulationForm.workOrderId = newState.workOrderId
            newState.circulationForm.status = '流转'
            put('/solution-ppm/api/v2/built-in-system-ppm/work_order/status_change', newState.circulationForm)
                .then(data => {
                    if (data.code !== 200) {
                        message.error(data.message)
                        return
                    }
                    message.success(data.message)
                    cancelCirculation()
                    getData()
                })
                .finally(() => {
                    newState.changeStatusLoading = false
                    cancelCirculation()
                })
        })
    }
    function cancelCirculation() {
        newState.circulationVisible = false
        newState.circulationForm = {
            solverList: [],
            status: '流转'
        }
    }
    // 解决中处理
    function confirmResolving() {
        newState.changeStatusLoading = true
        resolvingFormRef.value.validate().then(async () => {
            const deltaContent = resolvingQuillRef.value.getContents()

            const imageUploadPromises = []

            deltaContent.ops.forEach(op => {
                if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
                    const localSrc = op.insert.image

                    // 如果是 base64 图片，上传并替换为 URL
                    const file = dataURLtoFile(localSrc, 'image.png') // 将 base64 转换为 File 对象

                    const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
                        // 替换 op 中的 base64 URL 为服务器返回的 URL
                        op.insert.image = fullUrl
                    })

                    imageUploadPromises.push(uploadPromise)
                }
            })

            try {
                await Promise.all(imageUploadPromises)

                newState.resolvingForm.workOrderId = newState.workOrderId
                newState.resolvingForm.solutionDetail = JSON.stringify(deltaContent)
                put('/solution-ppm/api/v2/built-in-system-ppm/work_order/status_change', newState.resolvingForm)
                    .then(data => {
                        if (data.code !== 200) {
                            message.error(data.message)
                            return
                        }
                        message.success(data.message)
                        cancelResolving()
                        getData()
                    })
                    .finally(() => {
                        cancelResolving()
                        newState.changeStatusLoading = false
                    })
            } catch (error) {
                newState.changeStatusLoading = false
                console.error('图片上传失败', error)
                return // 终止提交
            }
        })
    }
    function cancelResolving() {
        newState.resolvingVisible = false
    }
    // 已解决处理
    function confirmResolved() {
        newState.changeStatusLoading = true
        resolvedFormRef.value.validate().then(async () => {
            const deltaContent = resolvedQuillRef.value.getContents()

            const imageUploadPromises = []

            deltaContent.ops.forEach(op => {
                if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
                    const localSrc = op.insert.image

                    // 如果是 base64 图片，上传并替换为 URL
                    const file = dataURLtoFile(localSrc, 'image.png') // 将 base64 转换为 File 对象

                    const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
                        // 替换 op 中的 base64 URL 为服务器返回的 URL
                        op.insert.image = fullUrl
                    })

                    imageUploadPromises.push(uploadPromise)
                }
            })

            try {
                await Promise.all(imageUploadPromises)

                newState.resolvedForm.workOrderId = newState.workOrderId
                newState.resolvedForm.status = '已解决'
                newState.resolvedForm.solutionDetail = JSON.stringify(deltaContent)
                put('/solution-ppm/api/v2/built-in-system-ppm/work_order/status_change', newState.resolvedForm)
                    .then(data => {
                        if (data.code !== 200) {
                            message.error(data.message)
                            return
                        }
                        message.success(data.message)
                        cancelResolved()
                        getData()
                    })
                    .finally(() => {
                        newState.changeStatusLoading = false
                        cancelResolved()
                    })
            } catch (error) {
                newState.changeStatusLoading = false
                console.error('图片上传失败', error)
                return // 终止提交
            }
        })
    }
    function cancelResolved() {
        newState.resolvedVisible = false
    }
    function showCirculation(record) {
        newState.circulationVisible = true
        newState.workOrderId = record.id
    }
    function showResolving(record) {
        newState.workOrderId = record.id
        get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/details/${newState.workOrderId}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            newState.resolvingVisible = true
            nextTick(() => {
                let solutionDetail = JSON.parse(data.data.workOrderDto.solutionDetail)
                newState.resolvingForm.solution = data.data.workOrderDto.solution
                resolvingQuillRef.value.setContents(solutionDetail)
            })
        })
    }
    function showResolved(record) {
        newState.resolvedVisible = true
        newState.workOrderId = record.id
        get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/details/${newState.workOrderId}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            nextTick(() => {
                let solutionDetail = JSON.parse(data.data.workOrderDto.solutionDetail)
                newState.resolvedForm.solution = data.data.workOrderDto.solution
                newState.resolvedForm.attachmentList = data.data.workOrderDto.attachmentList
                resolvedQuillRef.value.setContents(solutionDetail)
            })
        })
    }
    // 上传文件
    function handlerResolvedUpload(file) {
        newState.changeStatusLoading = true
        const data = new FormData()
        data.append('file', file)

        post('/file-storage/api/v1/file/upload', data)
            .then(({ data: { fullUrl } }) => {
                if (data) {
                    // 新文件对象
                    const newFile = {
                        uid: file.uid,
                        lastModified: file.lastModified,
                        name: file.name,
                        size: file.size,
                        type: file.type,
                        status: 'done',
                        url: fullUrl
                    }

                    // 去重，保留一个副本
                    newState.resolvedForm.attachmentList = [
                        // 保留已存在文件（去除重复）
                        ...newState.resolvedForm.attachmentList.filter(
                            item => item.uid !== file.uid && item.name !== file.name
                        ),
                        // 添加新的文件
                        newFile
                    ]
                }
                newState.changeStatusLoading = false
            })
            .catch(e => {
                message.error('上传失败' + e)
            })

        return false
    }
    // 移除文件
    function handlerResolvedRemove(file) {
        newState.resolvedForm.attachmentList = newState.resolvedForm.attachmentList.filter(
            item => item.uid !== file.uid
        )
    }
    const styleMap = {
        '未开始': {
            background: '#F6F6F6 !important',
            borderLeft: '2px solid #A9A9A9'
        },
        '待分发': {
            background: '#FFEADC !important',
            borderLeft: '2px solid #FFEADC'
        },
        '已解决': {
            background: '#EDF9E8 !important',
            borderLeft: '2px solid #52C41A'
        },
        '解决中': {
            background: '#EBF1FF  !important',
            borderLeft: '2px solid #3875FF'
        },
        '已关闭': {
            background: '#EBEBEB !important',
            borderLeft: '2px solid #262626'
        },
        '已回访': {
            background: '#EFE6FB !important',
            borderLeft: '2px solid #9254DE'
        }
    }

    // 获取样式
    function getTitleStyle(status) {
        return styleMap[status] || {}
    }
    const colorMap = {
        '未开始': { color: '#A9A9A9' },
        '已解决': { color: '#52C41A' },
        '解决中': { color: '#3875FF' },
        '已关闭': { color: '#262626' },
        '已回访': { color: '#9254DE' },
        '待分发': { color: '#FF7D27' }
    }
    function getColorStyle(status) {
        return colorMap[status] || '#262626'
    }
    const borderMap = {
        '未开始': { borderLeft: '2px solid #A9A9A9' },
        '已解决': { borderLeft: '2px solid #52C41A' },
        '解决中': { borderLeft: '2px solid #3875FF' },
        '已关闭': { borderLeft: '2px solid #262626' },
        '待分发': { borderLeft: '2px solid #FFEADC' }
    }
    function getBorder(status) {
        return borderMap[status] || {}
    }
    // 判断按钮是否可用的计算属性
    function isCirculationDisabled(item) {
        return !(
            (
                (item.status === '未开始' && item.solvers) || // 未开始且有solvers
                (item.status === '解决中' && item.solvers) || // 解决中且有solvers
                (item.status === '待分发' && item.distributed)
            ) // 待分发且distributed为true
        )
    }

    function isResolvingDisabled(item) {
        return !(
            (item.status === '未开始' && item.solvers) ||
            (item.status === '已解决' && item.myCreated) ||
            (item.status === '已关闭' && item.myCreated) ||
            (item.status === '已关闭' && item.pmoOrNot)
        )
    }

    function isResolvedDisabled(item) {
        return (
            // !(item.status === '未开始' && item.solvers) && // 解决人解决中
            !(item.status === '解决中' && item.solvers)
        )
    }

    function isCloseDisabled(item) {
        return (
            !((item.status === '未开始' && item.solvers) || (item.status === '未开始' && item.myCreated)) &&
            !(item.status === '解决中' && item.solvers) &&
            !(item.status === '已解决' && item.myCreated) &&
            !(item.status === '待分发' && item.distributed)
        ) // 创建人或PMO关闭
    }

    function isReturnVisitDisabled(item) {
        return !(item.status === '已关闭' && (item.myCreated || item.pmoOrNot)) // 创建人或PMO回访
    }
    function handleReturnVisit(item) {
        const params = {
            workOrderId: item.id,
            status: '已回访'
        }
        newState.changeStatusLoading = true
        put('/solution-ppm/api/v2/built-in-system-ppm/work_order/status_change', params)
            .then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                message.success(data.message)
                getData()
            })
            .finally(() => {
                newState.changeStatusLoading = false
            })
    }
    function handlerClose(item) {
        const params = {
            workOrderId: item.id,
            status: '已关闭'
        }
        put('/solution-ppm/api/v2/built-in-system-ppm/work_order/status_change', params)
            .then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                message.success(data.message)
                getData()
            })
            .finally(() => {
                newState.changeStatusLoading = false
            })
    }
    function handlerReOpen(item) {
        const params = {
            workOrderId: item.id,
            status: '重新打开'
        }
        put('/solution-ppm/api/v2/built-in-system-ppm/work_order/status_change', params).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            message.success(data.message)
            getData()
        })
    }
    // 提醒
    function toRmind(id) {
        get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/remind/${id}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            message.success('已经向工单关联人员发送提醒解决通知')
        })
    }
    function toggleCollapse(id) {
        if (isActive(id)) {
            // 如果当前面板是展开的，移除它的 ID
            state.collapseKey = state.collapseKey.filter(key => key !== id)
        } else {
            // 否则，将它的 ID 添加到 collapseKey 中
            state.collapseKey.push(id)
        }
    }
    function isActive(id) {
        return state.collapseKey.includes(id) // 检查该 ID 是否在 collapseKey 中
    }
    // 多选框改成单选
    function changeStatusSolverChange(value) {
        // if (Array.isArray(value) && value.length > 1) {
        //     newState.circulationForm.solverList = [value[0]] // 只保留第一个选项
        // }
        if (Array.isArray(value)) {
            newState.circulationForm.solverList = [value[value.length - 1]] // 只保留最后一个选项
        } else {
            newState.circulationForm.solverList = [value] // 如果不是数组，说明只选中一个选项
        }
    }
    function fatherSolverChange(value) {
        // if (Array.isArray(value) && value.length > 1) {
        //     state.modalForm.solverList = [value[0]] // 只保留第一个选项
        // }
        if (Array.isArray(value)) {
            state.modalForm.solverList = [value[value.length - 1]] // 只保留最后一个选项
        } else {
            state.modalForm.solverList = [value] // 如果不是数组，说明只选中一个选项
        }
    }
    function sonSolverChange(value) {
        // if (Array.isArray(value) && value.length > 1) {
        //     state.sonForm.solverList = [value[0]] // 只保留第一个选项
        // }
        if (Array.isArray(value)) {
            state.sonForm.solverList = [value[value.length - 1]] // 只保留最后一个选项
        } else {
            state.sonForm.solverList = [value] // 如果不是数组，说明只选中一个选项
        }
    }
    //    新需求
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    /*样式*/
    .page_root {
        overflow: hidden;
    }
    .body {
        height: 100%;
        background-color: #f0f2f5;
    }
    .top-search {
        height: 180px;
        margin-bottom: 16px;
        border-radius: 4px;
        display: flex;
        gap: 16px;
        justify-content: space-between;
    }
    .top-left {
        width: 100%;
        padding: 16px;
        background-color: #fff;
        border-radius: 4px;
    }
    .top-right {
        border-radius: 4px;
        background-color: #fff;
        padding: 20px 24px;
        padding-right: 36px;
    }
    .right-title {
        display: flex;
        margin-bottom: 8px;
    }
    .title-font {
        font-size: 14px;
        color: rgba(89, 89, 89, 0.65);
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
    }

    .top-search :deep(.ant3-col-6) {
        height: 32px;
    }
    .right-icon {
        display: flex;
    }
    .min-div,
    .left-icon {
        width: 40%;
        display: flex;
        gap: 8px;
    }
    .max-div,
    .right-icon {
        flex: 1;
    }
    .max-div {
        text-align: left;
    }

    .right-icon-content {
        flex: 1;
        display: flex;
        justify-content: space-between;
    }

    .ceycle0,
    .ceycle1,
    .ceycle2,
    .ceycle3 {
        width: 72px;
        height: 22px;
        color: #fff;
        text-align: center;
        line-height: 22px;
        font-weight: 600;
        border-radius: 2px;
    }
    .ceycle0 {
        background-color: #ff2a00;
    }
    .ceycle1 {
        background-color: #ffa940;
    }
    .ceycle2 {
        background-color: #ffa940;
    }
    .ceycle3 {
        background-color: #1890ff;
    }
    .ph-icon,
    .xc-icon,
    .zj-icon {
        width: 72px;
        height: 22px;
        color: #262626;
        text-align: center;
        line-height: 22px;
        font-weight: 600;
        background-color: #d6d6d6;
    }
    .tip {
        display: inline-block;
        width: 60px;
        position: absolute;
        bottom: -20px;
        left: -20px;
        text-align: center;
    }
    .main {
        background-color: #fff;
        height: 100%;
        border-radius: 4px;
        padding: 20px 24px;
        padding-top: 16px;
        position: relative;
    }
    .main-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    /*折叠面板样式*/

    :deep(.ant3-collapse-header) {
        padding: 0 !important;
        border: none !important;
        color: #262626 !important;
        background: rgba(56, 117, 255, 0.1);
    }

    :deep(.ant3-collapse-borderless > .ant3-collapse-item > .ant3-collapse-content > .ant3-collapse-content-box) {
        padding: 0 !important;
    }

    :deep(.ant3-collapse-item) {
        margin-bottom: 8px;
    }

    :deep(.ant3-collapse-icon-position-right > .ant3-collapse-item > .ant3-collapse-header) {
        border-radius: 4px;
        color: #3875ff;
        background: #f0f2f5;
        position: relative;
        border-radius: 4px 4px 0 0;
    }

    /*折叠面板样式*/
    .collapse-title {
        position: relative;
        width: 100%;
        display: flex;
        height: 86px;
        padding: 15px 24px;
        align-items: center;
        /* 如果需要保留左右两角的圆角，可以在这里添加 border-radius 样式 */
    }
    .title-border {
        border-bottom: 1px solid #d9d9d9;
    }
    .child-title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 10px 24px;
        position: relative;
        border-bottom: 1px solid #d9d9d9;
    }
    .child-title::before {
        content: '';
        position: absolute;
        top: -1px;
        left: -1px;
        width: 0;
        height: 0;
        border-right: 20px solid transparent; /* 控制三角形的大小和方向 */
        border-top: 20px solid #ffa940; /* 三角形的颜色 */
        border-top-left-radius: 4px;
    }
    .collapse-title-left {
        display: flex;
        flex-direction: column;
        width: 88px;
        height: 49px;
        justify-content: space-between;
        align-items: center;
        padding-right: 16px;
        border-right: 1px solid #d9d9d9;
    }
    .collapse-title-right {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .gd-title {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    .collapse-title-font,
    .inner-title {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        text-align: right;
        font-weight: 400;
    }
    .border-div {
        position: relative;
    }
    .border-line {
        position: absolute;
        width: 1px;
        height: 14px;
        background-color: #a5a6a7;
        right: -10px;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .collapse-title-right-btn {
        display: flex;
        gap: 8px;
    }

    .btn-item {
        position: relative;
        cursor: pointer;
    }
    .border-btn {
        position: absolute;
        width: 1px;
        height: 14px;
        background-color: #3875ff;
        right: -9px;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .active-btn {
        position: absolute !important;
        right: 20px !important;
        top: 58px !important;
        color: #3875ff !important;
        transform: translate(-50%, -50%) !important;
        font-size: 16px !important;
        font-weight: 500;
    }
    .active-icon {
        color: #3875ff;
        transform: rotate(90deg);
    }
    .item-inner {
        display: flex;
        padding: 7px 0;
        background: #f6f6f6;
        border-radius: 0 0 4px 4px;
    }

    .item-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 7px 24px;
        border-right: 1px solid #d9d9d9;
        gap: 10px;
    }

    .item-content1,
    .item-content2,
    .item-content3,
    .item-content4 {
        flex: 1; /* 平分宽度 */
    }
    .item-content4 {
        justify-content: start;
    }
    .inner {
        display: flex;
        justify-content: space-between;
    }

    .inner-title {
        text-align: right;
        flex: 0 0 auto; /* 保持标题宽度 */
    }

    .inner-msg {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1; /* 占用剩余空间 */
    }
    .inner-msg {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 100%;
        flex: 1;
    }
    .inner-title {
        text-align: right;
    }
    .inner-main {
        display: flex;
        flex: 1;
    }
    .item-children {
        background: #f8f9fa;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        margin-bottom: 16px;
        height: 93px;
    }
    .collapse-bottom {
        padding: 16px;
        padding-bottom: 0;
        background-color: #fff; /* 确保背景色 */
    }

    .item-children .collapse-title {
        padding-right: 16px;
        border-bottom: 1px solid #d9d9d9;
    }
    .child-inner {
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 32px;
    }
    .item-children .inner-main {
        position: relative;
    }
    .item-children .border-line {
        position: absolute;
        width: 1px;
        height: 14px;
        background-color: #a5a6a7;
        right: -16px;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .pagination-div {
        position: absolute;
        right: 30px;
        bottom: 0;
        padding: 10px;
        background: transparent; /* 可选：为背景添加颜色 */
    }
    .form-content :deep(.ant3-form-item-label) {
        width: 135px;
    }
    .form-content :deep(.ant3-input-number),
    :deep(.ant3-picker) {
        width: 100%;
    }
    :deep(.ql-toolbar) {
        background: #fafafa;
        border: 1px solid #d9d9d9;
        border-radius: 2px 2px 0 0;
    }
    :deep(.ql-blank) {
        min-height: 110px;
        background: #ffffff;
    }
    :deep(.ql-editor) {
        min-height: 110px;
        background: #ffffff;
    }
    .remarks-modal {
        background: #ffffff;
        border: 1px solid #d9d9d9;
        border-radius: 2px;
        height: 140px;
    }
    .change-status :deep(.ant3-form-item-label) {
        width: 110px;
    }
    .tip {
        font-weight: 800;
    }
    .father-right {
        max-width: 94%; /* 限制宽度 */
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-left: 13px;
        justify-content: space-between;
    }
    .father-title {
        display: block; /* 确保其为块级元素 */
        max-width: 100%; /* 确保宽度有限制 */
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
        white-space: nowrap; /* 禁止换行 */
        overflow: hidden; /* 隐藏溢出内容 */
        text-overflow: ellipsis; /* 显示省略号 */
    }
    .father-bottom {
        display: flex;
        align-items: end; /* 容器垂直底部对齐 */
        gap: 8px;
        justify-content: space-between;
    }
    .father-right-btn {
        display: flex;
        gap: 8px;
    }

    .father-bottom > * {
        align-self: flex-end; /* 内部元素底部对齐 */
    }
    .father-bottom-left {
        display: flex;
        gap: 16px;
    }
    .father-icon {
        font-size: 12px;
        color: #333333;
        position: relative;
        top: -1px;
        margin-right: 4px;
    }
    .father-bgc1 {
        display: inline-block;
        width: 13px;
        height: 13px;
        background-image: url('http://10.40.0.33:9001/file-storage/469958199879835648-source.png');
        background-size: cover;
        position: relative;
        top: 1px;
        margin-right: 4px;
    }
    .father-bgc2 {
        display: inline-block;
        width: 13px;
        height: 13px;
        background-image: url('http://10.40.0.33:9001/file-storage/469958216751423488-source.png');
        background-size: cover;
        position: relative;
        top: 1px;
        margin-right: 4px;
    }
    .father-bgc3 {
        display: inline-block;
        width: 13px;
        height: 13px;
        background-image: url('http://10.40.0.33:9001/file-storage/469958229367889920-source.png');
        background-size: cover;
        position: relative;
        top: 1px;
        margin-right: 4px;
    }
    :deep(.ant3-collapse-item) {
        background: #ffffff;
    }
    .collapse-title-right .border-line {
        right: -8px;
    }
    .gd-scroll {
        overflow-y: auto;
        overflow-x: hidden;
        height: calc(100% - 335px);
    }
    .gd-item {
        margin-bottom: 24px;
    }
    .gd-item:last-child {
        margin-bottom: 5px;
    }
    .solution-div {
        background: rgba(56, 117, 255, 0.1);
        padding: 0 16px;
        padding-bottom: 16px;
    }
    .inner-solution {
        display: flex;
        justify-content: start;
    }
    .top-title {
        height: 16px;
        padding-left: 8px;
        border-left: 4px solid #3875ff;
        font-size: 16px;
        line-height: 16px;
        color: #262626;
        font-weight: 600;
    }
    .top-tip {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        text-align: justify;
        font-weight: 400;
        background: rgba(250, 100, 0, 0.1);
        border: 1px solid #fa6400;
        border-radius: 2px;
        padding: 6px 16px;
        margin-right: 8px;
    }
    .description-tip {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
        background: rgba(250, 100, 0, 0.1);
        border: 1px solid #fa6400;
        border-radius: 2px;
        padding: 6px 16px;
        margin-bottom: 16px;
    }
    .tip-img {
        width: 16px;
        height: 16px;
        color: #fa6400;
    }
    .file-content {
        padding: 16px;
        color: #3875ff;
        cursor: pointer;
    }
    .form-content :deep(.ql-snow .ql-editor) img {
        width: 200px;
    }
    .change-status :deep(.ql-snow .ql-editor) img {
        width: 200px;
    }
    .collapse-content-font {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
    }
    .max-length {
        display: inline-block; /* 使得元素能够处理 overflow */
        max-width: 180px; /* 根据需要调整最大宽度 */
        overflow: hidden; /* 隐藏超出部分 */
        white-space: nowrap; /* 不换行 */
        text-overflow: ellipsis; /* 显示省略号 */
    }
    .timeout {
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        height: 22px;
        background: #ffbfb3;
        border-radius: 0 4px 0 4px;
        color: #ff2a00;
        text-align: center;
    }
    :deep(
            .ant3-collapse .ant3-collapse-item-disabled > .ant3-collapse-header,
            .ant3-collapse .ant3-collapse-item-disabled
        ) {
        cursor: default;
    }
    .remove-icon :deep(.ant3-select-selection-item-remove) {
        display: none !important;
    }
</style>
